<template>
  <div class="chat-sidebar-container">
    <!-- 侧边栏头部 -->
    <div class="sidebar-header" v-if="!chatStore.sidebarCollapsed">
      <el-button 
        type="primary" 
        @click="createNewSession" 
        :loading="chatStore.isLoading"
        class="new-chat-btn"
      >
        <el-icon><Plus /></el-icon>
        <span>新建对话</span>
      </el-button>
    </div>
    
    <!-- 会话列表 -->
    <div class="session-list" v-if="!chatStore.sidebarCollapsed">
      <SessionList />
    </div>
    
    <!-- 侧边栏底部 -->
    <div class="sidebar-footer">
      <el-button 
        text 
        @click="chatStore.toggleSidebar()"
        class="collapse-btn"
        :title="chatStore.sidebarCollapsed ? '展开侧边栏' : '折叠侧边栏'"
      >
        <el-icon>
          <Expand v-if="chatStore.sidebarCollapsed" />
          <Fold v-else />
        </el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup>
/**
 * 聊天侧边栏组件
 * 包含新建对话、会话列表、侧边栏折叠等功能
 */
import { useChatStore } from '@/stores/chat'
import { Plus, Expand, Fold } from '@element-plus/icons-vue'
import SessionList from './SessionList.vue'
import { ElMessage } from 'element-plus'

const chatStore = useChatStore()

/**
 * 创建新会话
 */
const createNewSession = async () => {
  const response = await chatStore.createNewSession()
  if (response.success) {
    ElMessage.success('新会话创建成功')
  } else {
    ElMessage.error(response.message || '创建会话失败')
  }
}
</script>

<style scoped>
.chat-sidebar-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #e1e5e9;
}

.new-chat-btn {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
}

.session-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid #e1e5e9;
  text-align: center;
}

.collapse-btn {
  width: 100%;
  color: #666;
  padding: 8px;
}

.collapse-btn:hover {
  background-color: #f5f7fa;
}

/* 滚动条样式 */
.session-list::-webkit-scrollbar {
  width: 6px;
}

.session-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.session-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.session-list::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
</style> 